<template>
	<view>
		<camera class="camera" mode="scanCode" device-position="back" @scancode="scancode" @error="error">
			<cover-image class="cover-img" src="@/static/image/scan.png"></cover-image>
			<cover-view class="scan-animation" :animation="animationData"></cover-view>
		</camera>
		<!-- 下方列表 -->
		<div class="tip" v-if="list.length > 0">已扫 {{ list.length }} 件</div>
		<scroll-view scroll-y class="list"><goodsItem v-for="item in list" :key="item.unitNo" :content="item" @delUnitNo="delUnitNo" /></scroll-view>
		<!-- 暂无数据 -->
		<uni-nodata v-if="list.length == 0"></uni-nodata>
		<view class="bottom_btn" v-if="list.length > 0">
			<p><u-button type="primary" shape="circle" :ripple="true" @click="popupShow = true">提 交</u-button></p>
		</view>
		<!-- toast提示框 -->
		<u-toast ref="uToast" />
		<!-- 弹出框 -->
		<u-popup v-model="popupShow" height="700rpx" mode="bottom">
			<inOrOutStorage v-if="this.inOrOutPopup.includes(this.flag)" @iOoSubmitData="iOoSubmitData" />
			<scrapOrReturn v-if="this.tjOrBsPopup.includes(this.flag)" :titleFlag="flag" @sOrSubmitData="sOrSubmitData" />
		</u-popup>
	</view>
</template>

<script>
import goodsItem from './components/goodsItem.vue';
import inOrOutStorage from './components/inOrOutStorage.vue';
import scrapOrReturn from './components/scrapOrReturn.vue';
// 模拟扫码声音
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = '/static/di.mp3';
// 禁止扫码声音
const noInAudioContext = uni.createInnerAudioContext();
noInAudioContext.src = '/static/cw.mp3';
export default {
	components: {
		goodsItem,
		inOrOutStorage,
		scrapOrReturn
	},
	data() {
		return {
			// 弹出框显示类型
			inOrOutPopup: ['gcck', 'fxls', 'fxck'],
			tjOrBsPopup: ['tj', 'bs'],
			// 弹出框标示
			popupShow: false,
			// 判断是从那个页面传进来的
			flag: '',
			// 是否在扫描中
			scanIng: false,
			// 唯一吗list
			unitNoList: [],
			// 数据list
			list: [],
			// 动画
			animation: '',
			animationData: ''
		};
	},
	computed: {
		// 当前页面允许扫码唯一吗的状态
		safeCodes() {
			let safeCodes = [];
			switch (this.flag) {
				// 工厂出库
				case 'gcck':
					safeCodes = [2];
					break;
				// 返修揽收
				case 'fxls':
					safeCodes = [7, 8, 11, 12, 13, 103];
					break;
				// 返修出库
				case 'fxck':
					safeCodes = [9, 11, 14, 103];
					break;
				// 退件
				case 'tj':
					safeCodes = [9, 103];
					break;
				// 报损--进不去扫码页面
				case 'bs':
					safeCodes = [5, 102, 103, 107, 500];
					break;
			}
			return safeCodes;
		}
	},
	onLoad(option) {
		// 设置从哪个页面进来和页面title
		this.flag = option.flag;
		console.log(this.inOrOutPopup.includes(this.flag));

		uni.setNavigationBarTitle({
			title: option.title
		});
	},
	onReady() {
		//动画开始
		this.animation = uni.createAnimation({
			transformOrigin: '50% 50%',
			duration: 1200,
			timingFunction: 'linear',
			delay: 0
		});
		this.next = true;
		this.Translate();
	},
	methods: {
		Translate() {
			// 循环动画
			setInterval(() => {
				if (this.next) {
					this.animation.translateY(50).step();
					this.next = !this.next;
				} else {
					this.animation.translateY(-50).step();
					this.next = !this.next;
				}
				this.animationData = this.animation.export();
			}, 1200);
		},
		error(e) {
			console.log(e.detail);
		},
		scancode(e) {
			// 等待接口返回再扫描
			if (this.scanIng) {
				return;
			} else {
				this.scanIng = true;
			}
			// 提示音
			innerAudioContext.play();
			// 判断是否重复
			if (this.unitNoList.includes(e.detail.result)) {
				this.$refs.uToast.show({
					title: '重复的唯一码',
					type: 'warning',
					position: 'bottom'
				});
				this.scanIng = false;
				return;
			}
			this.$store.dispatch('scanGetUnitDetail', { unitNo: e.detail.result }).then(res => {
				const { unitStatus } = res.data;
				// 判断是否允许进入唯一吗列表
				if (this.canIn(unitStatus)) {
					this.list.unshift(res.data);
					this.unitNoList.unshift(res.data.unitNo);
					this.scanIng = false;
				}
			});
		},

		// 判断是否允许进入唯一吗列表
		canIn(unitStatus) {
			if (this.flag == 'bs') {
				if (this.safeCodes.includes(unitStatus)) {
					// 禁止进入提示音
					noInAudioContext.play();
					this.scanIng = false;
					this.$refs.uToast.show({
						title: '不可报损状态',
						type: 'error',
						position: 'bottom'
					});
					return false;
				}
				return true;
			} else {
				if (!this.safeCodes.includes(unitStatus)) {
					// 禁止进入提示音
					noInAudioContext.play();
					this.scanIng = false;
					this.$refs.uToast.show({
						title: '当前订单状态错误',
						type: 'error',
						position: 'bottom'
					});
					return false;
				}
				return true;
			}
		},
		// 删除唯一码
		delUnitNo(unitNo) {
			uni.showModal({
				title: '提示',
				content: '确定要删除吗？',
				success: res => {
					if (res.confirm) {
						this.list.splice(this.list.findIndex(item => item.unitNo == unitNo), 1);
						this.unitNoList.splice(this.unitNoList.findIndex(item => item == unitNo), 1);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 退件或者报损提交数据
		sOrSubmitData(data) {
			let title = this.flag == 'bs' ? '报损成功' : '退件成功';
			this.$store
				.dispatch(this.flag == 'bs' ? 'scrapWorkOrder' : 'chargebackRepairWorkOrder', {
					unitNoList: this.unitNoList,
					reason: data
				})
				.then(res => {
					if (res.errorCode == 0) {
						this.popupShow = false;
						this.$refs.uToast.show({
							duration: 1000,
							title,
							type: 'success',
							back: true
						});
					}
				});
		},
		// 交货方式
		iOoSubmitData(params) {
			let title = '';
			switch (this.flag) {
				// 工厂出库
				case 'gcck':
					title = '工厂出库成功';
					params.mailType = 'F_QUALIFIED_OUT';
					break;
				// 返修揽收
				case 'fxls':
					title = '返修揽收成功';
					params.mailType = 'F_UNQUALIFIED_IN';
					break;
				// 返修出库
				case 'fxck':
					title = '返修出库成功';
					params.mailType = 'F_REPAIR_OUT';
					break;
			}
			params.unitNo = this.unitNoList;
			this.$store
				.dispatch('mailUnit', {
					body: params
				})
				.then(res => {
					if (res.errorCode == 0) {
						this.popupShow = false;
						this.$refs.uToast.show({
							duration: 1000,
							title,
							type: 'success',
							back: true
						});
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 20px;
	font-size: 14px;
	line-height: 24px;
}
.camera {
	width: 100%;
	height: 30vh;
	position: relative;
}
.cover-img {
	width: 300rpx;
	height: 300rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150rpx;
	margin-top: -150rpx;
}
.scan-animation {
	position: absolute;
	width: 180rpx;
	height: 6rpx;
	top: 50%;
	left: 50%;
	margin-left: -90rpx;
	margin-top: -3rpx;
	background-color: #999;
	border-radius: 50%;
}
.list {
	background: #fff;
	max-height: 55vh;
}
.bottom_btn {
	display: flex;
	height: 10vh;
	line-height: 10vh;
	position: absolute;
	align-items: center;
	width: 100%;
	background: #fff;
	bottom: 0;
	border-top: 1rpx solid #f1f1f1;
	p {
		width: 80%;
		margin: 0 auto;
	}
}
.tip {
	padding: 0rpx 40rpx;
	height: 5vh;
	line-height: 5vh;
	border-bottom: 1rpx solid #f1f1f1;
	text-align: right;
	font-size: 24rpx;
	background: #fff;
	color: #777;
}
</style>
